<template>
  <div>
    <pageContent hasFixedBottom>
      <div class="preview">
        <div class="pic-wrap">
          <!-- 无附件时的bar -->
          <div class="no-file-bar-wrap" v-if="noFileData.length">
            <div class="no-file-bar" :class="{ 'bar-hide': isBarHide }">
                <span class="iconfont icon-srcm-i-warning"></span>
                <p>材料中有
                  <span class="no-file-count">{{noFileData.length}}</span> 份成果未上传附件，为了避免不影响您的材料生产，请确认是否需要补充附件</p>
                <div class="see-no-file-achievement" v-popover:noFilePopover>
                    查看无附件成果
                    <!-- 无附件popover -->
                    <el-popover
                      ref="noFilePopover"
                      placement="bottom"
                      width="500"
                      trigger="click">
                      <el-table
                        :data="noFileData"
                        border
                        class="no-file-table">
                        <el-table-column
                          label="标题"
                          prop="title"
                          min-width="220"
                          class-name="no-file-title">
                        </el-table-column>
                        <el-table-column
                          label="上传者"
                          prop="realname">
                        </el-table-column>
                        <el-table-column label="操作">
                          <template scope="scope">
                            <el-button
                              type="text"
                              size="small"
                              class="seed-back"
                              @click="rejectNoFileAchievement(scope.$index, scope.row)">退回</el-button>
                            <el-button
                              type="text"
                              size="small"
                              class="remove"
                              @click="removeNoFileAchievement(scope.$index, scope.row)">移除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-popover>
                </div>
                <a href="javascript:;" class="el-icon-close close-no-file-bar" @click="isBarHide = true"></a>
            </div>
            <a href="javascript:;" class="tip-point el-icon-information point-hide" @click="isBarHide = false"></a>
          </div>
          <!-- swiper -->
          <swiper :options="swiperOption" ref="swiper">
            <swiper-slide
              v-for="(item, index) in swiperSlides">
              <div class="pdf-page">
                <div class="cover" v-if="item.type == 'cover'" v-html="item.html"></div>
                <div :class="{catalog: true, 'is-sun': settings.catalog_font == '宋体'}" v-if="item.type == 'catalog'">
                  <div class="page menu" v-html="item.html"></div>
                </div>
                <div class="category" v-if="item.type == 'category'">
                  <h1>{{item.name}}</h1>
                </div>
                <!-- 有附件 -->
                <div v-if="item.type == 'image'" class="image">
                  <img :src="item.url" alt="" :class="{'swiper-lazy': false, 'wild': item.wild}">
                  <p :class="{'page-footer': true, 'left': settings.double_print && !((index - catalogLength) % 2), 'no-footer': !settings.show_footer, 'no-page': !settings.show_pageno}">
                    {{item.title}}
                    <span class="number">{{index - catalogLength}}</span>
                  </p>
                </div>
                <!-- 无附件 -->
                <div v-if="item.type == 'nofile'" class="nofile">
                  <ul>
                    <li
                      v-for="field in item.fields"
                      v-if="field.value">
                      <label>{{field.text}}:</label>
                      <p>{{field.value}}</p>
                    </li>
                  </ul>
                  <p :class="{'page-footer': true, 'left': settings.double_print && !((index - catalogLength) % 2), 'no-footer': !settings.show_footer, 'no-page': !settings.show_pageno}">
                    {{item.title}}
                    <span class="number">{{index - catalogLength}}</span>
                  </p>
                </div>
              </div>
            </swiper-slide>
            <a class="prev el-icon-right" slot="button-prev"></a>
            <a class="next el-icon-left" slot="button-next"></a>
          </swiper>
        </div>
        <!-- 页面上的移除按钮 -->
        <div class="tag" v-if="typeof activeDocIndex == 'number' || swiperIndex <= catalogLength">
          <img :src="lollipop" alt="">
          <p v-if="typeof activeDocIndex == 'number'" class="operation-book text-right">
            <span class="state"><i class="el-icon-loading"></i> 移除中</span>
            <el-dropdown class="delete" @command="handleCommand">
              <span class="el-dropdown-link">
                <span class="el-icon-delete"></span> 移除<i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="removePage">移除此页</el-dropdown-item>
                <el-dropdown-item command="removeAchievement">移除成果</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </p>
          <p v-if="swiperIndex === 0" class="operation-book text-right">
            <a class="edit-cover" @click="editCover">
              <span class="el-icon-edit"></span> 编辑封面
            </a>
          </p>
          <p v-if="swiperIndex !== 0 && swiperIndex <= catalogLength" class="operation-book text-right">
            <a class="edit-cover" @click="editCatalog">
              <span class="el-icon-edit"></span> 编辑目录
            </a>
          </p>
          <p v-if="typeof activeDocIndex == 'number'" class="name text-right">{{activeTitle}}</p>
        </div>

        <div class="operation">
          <ul class="link-list">
            <li class="to-cover" @click="jumpTo(0)"><i class="el-icon-mainmenu-home"></i> 转至封面</li>
            <li class="to-catalog" @click="jumpTo(1)"><i class="el-icon-mainmenu-result"></i> 转至目录</li>
          </ul>
          <form @change="edited = true">
            <ul class="printf-list">
              <li>
                <el-tooltip class="item" effect="light" content="显示或隐藏页脚" placement="top-start">
                  <div>
                    <el-checkbox v-model="settings.show_footer">页脚</el-checkbox>
                  </div>
                </el-tooltip>
              </li>
              <li>
                <el-tooltip class="item" effect="light" content="显示或隐藏页码" placement="top-start">
                  <div>
                    <el-checkbox v-model="settings.show_pageno">页码</el-checkbox>
                  </div>
                </el-tooltip>
              </li>
              <li>
                <el-checkbox v-model="settings.just_starred">精华</el-checkbox>
                <el-tooltip class="item" effect="light" content="什么是 “全文材料”和“精华材料”" placement="top">
                  <i class="el-icon-mainmenu-help" @click="showFAQ('questions2')"></i>
                </el-tooltip>
              </li>
              <li>
                <el-checkbox v-model="settings.double_print">双面打印</el-checkbox>
                <el-tooltip class="item" effect="light" content="开启双面打印有什么作用？" placement="top">
                  <i class="el-icon-mainmenu-help" @click="showFAQ('questions1')"></i>
                </el-tooltip>
              </li>
            </ul>
          </form>
        </div>
        <!-- 点击下一步，无附件时的 dialog -->
        <el-dialog
          title="生成材料"
          :visible.sync="nextStepDialog"
          :modal-append-to-body="false"
          size="tiny">
          <div class="next-step-body">
            <i class="el-icon-information"></i>
            <p>材料中有 <span class="no-file-count">{{noFileData.length}}</span> 份无附件成果，是否继续生成？<br>无附件的成果，系统将默认以成果信息作为生成内容保存到材料中。</p>
            <div slot="footer" class="next-step-footer">
              <el-button @click="nextStepDialog = false; loadingProp = true;">取 消</el-button>
              <el-button type="primary" @click="confirmNextStep">确 定</el-button>
            </div>
          </div>
        </el-dialog>
        <step-action
          :active="true"
          :step="2"
          :loadingProp="nextStepLoading"
          @save="nextStep"
          ref="action-bar">
        </step-action>
      </div>
    </pageContent>
    <bottom-fixed>
      <div class="pull-right">
        <span><返回上一步</span>
        <span class="pass" @click="pass">生成PDF</span>
      </div>
    </bottom-fixed>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash';
  import dateFormat from 'dateformat';

  import BookUtil from 'tools/util/book';

  import { swiper, swiperSlide } from 'vue-awesome-swiper';
  import 'swiper/dist/css/swiper.css';
  import { saveAttachment, getAttachmentData, rejectAchievement } from 'api';

  import stepAction from './step-action';
  import CatalogStyleUtil from 'tools/util/catalog_style';
  const lol = require('assets/images/lollipop.png');
  const college = {
    badge_url:"https://img.okay.do/acagrid/static/images/default/default_badge.png",
    colg_id: 520,
    column_all_settings: null,
    column_export_settings: null,
    column_settings: null,
    created: 1527911913,
    creator_id: 934,
    creator_name: "林同聂",
    creator_phone: "13107114809",
    days: 0,
    en_name: "",
    en_university: "",
    id: 520,
    ins_id: 24195,
    is_star: 0,
    name: "测试学院",
    plan: "standard",
    renew: 0,
    sale_id: null,
    show_before_join : 0,
    show_contacts: 1,
    show_infocards: 1,
    status: 0,
    university: "湖南城市学院",
    university_id: 890,
    updated: 1527911913,
    verify_answer: "打豆豆",
    verify_question: "我们院的院长叫什么名字？",
  }
  export default {
    data() {
      const self = this;
      const attachment = {
        title: '',
        data_list: [],
        theme: [],
      };

      return {
        lollipop: lol,
        id: this.$route.params.id,
        attachment,
        college: college,
        catalogLength: 1,
        activeCategory: '',
        activeDocIndex: '',
        activeImgIndex: '',
        activeTitle: '',
        swiperIndex: 0,
        swiperOption: {
          autoplay: false,
          prevButton: '.prev',
          nextButton: '.next',
          lazyLoading: false,
          lazyLoadingInPrevNext: true,
          lazyLoadingInPrevNextAmount: 3,
          autoHeight: false,
          keyboardControl: true,
          onSlideChangeStart: function (swiper) {
            self.swiperIndex = swiper.realIndex;
            const offsetValue = swiper.realIndex + self.offset;
            if (offsetValue > self.swiperSlides.length) {
              self.section++;
              const target = self.section * self.sectionSize;
              self.swiperSlides.push(...self.pages.slice(target, target + self.sectionSize));
            }
          },
        },
        pdf: {
          offsetTop: 44.13, // 图片旋转以后距离顶上上距离
          offsetBottm: 82.19, // 图片旋转以后距离顶上上距离
          offsetHorizontal: 50, // 装订预留
          width: 595.28, // 页面的宽度
          ratio: 0.7070707070707071, // a4纸张的比例
          column: 1, // 几栏布局
        },
        edited: false, // 判断是否编辑，没有编辑不需要请求接口
        section: 0,
        sectionSize: 100,
        offset: 10,
        swiperSlides: [{
          type: 'cover',
          title: '',
        }, {
          type: 'catalog',
        }],
        settings: {
          show_footer: true,
          show_pageno: true,
          double_print: false,
          just_starred: false,
        },
        isBarHide: false,
        noFileData: [], // 无附件的材料
        nextStepDialog: false,
        nextStepLoading: false,
      };
    },
    created() {
      this.fetchData(this.id);
    },
    computed: {
      containerRatio() {
        return (this.pdf.width - (this.pdf.offsetHorizontal * 2)) / ((this.pdf.width / this.pdf.ratio) - this.pdf.offsetTop - this.pdf.offsetBottm);
      },
      pages() {
        const pages = [];
        pages.push({
          type: 'cover',
          html: this.getAttachmentCover(this.attachment.theme),
        });

        const catalog = {
          type: 'catalog',
        };

        pages.push(catalog);
        let pager = 0;
        this.attachment.data_list.forEach(category => {
          pager++;
          if (this.settings.double_print && !(pager % 2)) {
            pages.push({
              type: 'category' // 不含name且type为category为空白页
            });
            pager++;
          }
          pages.push({
            type: 'category',
            name: category.alt_mod_title || category.mod_title,
          });
          if (this.settings.double_print) {
            pages.push({
              type: 'category'
            });
            pager++;
          }
          category._form_table.dataset.forEach((doc, index) => {
            // 无附件时
            if (doc.files_count == 0) {
              pages.push({
                type: 'nofile',
                fields: doc.fields,
                category: category.mod_db_table,
                docIndex: index,
                title: doc.alt_title || doc.title,
                imgIndex: 0,
              });
              pager++;
            // 有附件时
            } else {
              doc._files.forEach((item, subscript) => {
                let image = null;
                if (this.settings.just_starred) {
                  if (parseInt(item.star) === 1) {
                    image = this.normalizeImage(item);
                  }
                } else {
                  image = this.normalizeImage(item);
                }
                if (image) {
                  pages.push({
                    type: 'image',
                    url: image.url,
                    wild: image.wild,
                    category: category.mod_db_table,
                    docIndex: index,
                    title: doc.alt_title || doc.title,
                    user: doc.realname,
                    imgIndex: subscript,
                  });
                }
              });
              pager += doc._files.length;
            }
          });
        });
        return pages;
      },
    },
    watch: {
      swiperIndex(value) {
        this.activeCategory = this.pages[value].category;
        this.activeDocIndex = this.pages[value].docIndex;
        this.activeTitle = this.pages[value].title;
        this.activeImgIndex = this.pages[value].imgIndex;
      },
      'settings.double_print'(value) {
        this.$refs.swiper.swiper.slideTo(0);
        this.reCalcCatalog();
      },
      'settings.just_starred'(value) {
        this.$refs.swiper.swiper.slideTo(0);
        this.reCalcCatalog();
      },
    },
    methods: {
      // 移除
      removeNoFileAchievement(index, noFileData) {
        let swiperDocIndex = 1;
        this.updateAfterRemove(index, noFileData)
        this.saveAttachment(() => {
          this.reCalcCatalog();
          this.$message.success('移除成功');
        });
      },
      // 退回或移除成功之后更新本地数据
      updateAfterRemove(index, noFileData) {
        // 更新 无附件成果 数据
        for (let i = 0, len = this.noFileData.length; i < len; i++) {
          if (index === i) {
            this.noFileData.splice(i, 1);
            break;
          }
        }
        // 更新所有数据
        for (let i = 0, len1 = this.attachment.data_list.length; i < len1; i++) {
          for (let j = 0, len2 = this.attachment.data_list[i]._form_table.dataset.length; j < len2; j++) {
            if (this.attachment.data_list[i]._form_table.dataset[j].achiv_id == noFileData.achiv_id) {
              this.attachment.data_list[i]._form_table.dataset.splice(i, 1);
              break;
            }
          }
        }
        this.reCalcCatalog();
      },
      // 退回 无附件的成果
      rejectNoFileAchievement(index, noFileData) {
        const param = {
          achiv_id: noFileData.achiv_id,
          reason: '此成果无附件',
          staff_id: noFileData.staff_id
        };
        rejectAchievement(param)
          .then(res => {
            if (res.code !== 1) {
              this.$message(res.message);
              return;
            }
            this.updateAfterRemove(index, noFileData);
            this.saveAttachment(() => {
              this.$message.success('退回成功');
            });
          })
          .catch(e => {
            console.error(e);
          })
      },
      normalizeData(data) {
        if (typeof data === 'string') {
          return JSON.parse(data);
        } else {
          return data;
        }
      },
      fetchData(id) {
        getAttachmentData({attachment_id: id})
          .then(({data}) => {
            this.$set(this.$data, 'attachment', data.attachment);
            this.noFileData = data.no_files_docs;
            const setting = this.normalizeData(data.attachment.settings);
            if (setting) {
              for (let i in setting) {
                if (setting[i]) {
                  this.$set(this.settings, i, parseInt(setting[i]) === 1);
                }
              }
            }
            this.reCalcCatalog(this.attachment.settings);
            this.$root.loading.visible = false;
            this.swiperSlides[0].title = data.attachment.title;
          })
          .catch(err => console.log(err));
      },

      handleCommand(command) {
        if (command == 'removePage') {
          this.removePage();
        } else if (command == 'removeAchievement') {
          this.removeAchievement();
        }
      },

      removePage(event) {
        // 确认是否移除单页
        this.$confirm('移除后此页成果将不在材料中生成，并不会影响成果中的附件。', '您确认要移除此页吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          callback();
        }).catch(() => {

        });

        var that = this;
        function callback() {
          const $target = $('.operation-book');
          $target.addClass('removing');
          setTimeout(() => {
            let swiperDocIndex = 1;
            that.attachment.data_list.forEach(item => {
              if (item.mod_db_table == that.activeCategory) {
                // 删掉单张图片，如果整个文档只有一张图片，则连文档一起删掉
                if (item._form_table.dataset[that.activeDocIndex]._files.length > 1) {
                  item._form_table.dataset[that.activeDocIndex]._files.forEach((per, subscript) => {
                    if (that.activeImgIndex == subscript) {
                      item._form_table.dataset[that.activeDocIndex]._files.splice(subscript, 1);
                    }
                  });
                } else {
                  for (let l = that.swiperIndex; l > 0; l--) {
                    if (that.swiperSlides[l].title !== that.activeTitle) {
                      swiperDocIndex = that.swiperIndex - l;
                      break;
                    }
                  }
                  item._form_table.dataset.splice(that.activeDocIndex, 1);
                }
              }
            });
            that.saveAttachment(() => {
              const preCatalogLength = that.catalogLength;
              that.$nextTick(() => {
                that.reCalcCatalog();
                that.$nextTick(() => {
                  const nowPos = that.swiperIndex - swiperDocIndex - (preCatalogLength - that.catalogLength);
                  that.$refs.swiper.swiper.slideTo(nowPos);
                  $target.removeClass('removing');
                  that.$message.success('操作成功');
                });
              });
            });
          }, 0);
        }
      },

      removeAchievement() {
        // 确认是否移除
        this.attachment.data_list.forEach(item => {
          if (item.mod_db_table == this.activeCategory) {
            const title = item._form_table.dataset[this.activeDocIndex].title;
            const imgAmount = item._form_table.dataset[this.activeDocIndex]._files.length || 1;
            this.$confirm(`移除后，成果《 ${title} 》共 ${imgAmount} 页，将不在材料中生成。`, '您确认要移除此项成果吗？', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              callback();
            }).catch(() => {

            });
          }
        })

        var that = this;
        function callback() {
          const $target = $('.operation-book');
          $target.addClass('removing');
          setTimeout(() => {
            let swiperDocIndex = 1;
            that.attachment.data_list.forEach(item => {
              if (item.mod_db_table == that.activeCategory) {
                for (let l = that.swiperIndex; l > 0; l--) {
                  if (that.swiperSlides[l].title !== that.activeTitle) {
                    swiperDocIndex = that.swiperIndex - l;
                    break;
                  }
                }
                item._form_table.dataset.splice(that.activeDocIndex, 1);
              }
            });
            const nowPos = that.swiperIndex - swiperDocIndex;
            that.$refs.swiper.swiper.slideTo(nowPos);

            that.saveAttachment(() => {
              const preCatalogLength = that.catalogLength;
              that.$nextTick(() => {
                that.reCalcCatalog();
                that.$nextTick(() => {
                  $target.removeClass('removing');
                  that.$message.success('操作成功');
                });
              });
            });
          }, 0);
        }
      },

      jumpTo(index) {
        this.$refs.swiper.swiper.slideTo(index);
      },
      reCalcCatalog(settings) {
        let setting = {};
        if (settings) {
          setting = this.normalizeData(this.attachment.settings);
        } else {
          for (let i in this.settings) {
            setting[i] = this.settings[i] ? 1 : 0;
          }
        }

        const html = BookUtil.getPages(this.attachment.data_list, null, setting);
        const pages = html.map(item => ({
          type: 'catalog',
          html: item.get(0).innerHTML,
        }));
        this.pages.splice(1, 1);
        this.catalogLength = html.length;
        this.pages.splice(1, 0, ...pages);
        this.swiperSlides = this.pages.slice(0, (this.section + 1) * this.sectionSize);
        this.$nextTick(() => {
          CatalogStyleUtil.calculateDashWidth();
        });
      },
      nextStep() {
        // 有无附件的成果时，弹窗提醒
        if (this.noFileData.length !== 0) {
          this.nextStepDialog = true;
          return;
        }
        this.confirmNextStep();
      },
      confirmNextStep() {
        this.nextStepDialog = false;
        this.nextStepLoading = true;
        if (this.edited) {
          this.saveAttachment(() => {
            this.$router.push({name: 'download', params: { id: this.id }});
          });
        } else {
          this.$router.push({name: 'download', params: { id: this.id }});
        }
      },
      saveAttachment(callback) {
        const data = cloneDeep(this.attachment);
        data.data_list = JSON.stringify(data.data_list);
        data.theme = JSON.stringify(data.theme);
        let setting = this.normalizeData(data.settings);
        if (!setting) {
          setting = {};
        }
        for (let i in this.settings) {
          setting[i] = this.settings[i] ? 1 : 0;
        }
        data.settings = JSON.stringify(setting);
        saveAttachment(data)
          .then(({data}) => {
            callback();
          })
          .catch(err => {
            console.log(err);
          });
      },
      getAttachmentCover(theme) {
        if (!theme) {
          theme = [
            {top: 0.21, type: 'h1', value: {text: '附件材料'}},
            {top: 0.68, type: 'item', value: {key: '申报单位', value: this.college.university}},
            {top: 0.68, type: 'item', value: {key: '申报学院', value: this.college.name}},
            {top: 0.9, type: 'word', value: {text: dateFormat(Date.now(), 'yyyy年mm月')}}
          ];
        }
        if (typeof theme === 'string') {
          theme = JSON.parse(theme);
        }

        let str = '';
        let itemArr = [];
        let itemTop = 0;
        let maxWordLength = 0;

        theme.forEach(item => {
          switch (item.type) {
            case 'h1':
            case 'h2':
            case 'h3':
            case 'word':
            case 'time':
              let type = item.type === 'word' ? 'p' : item.type;
              str += `<${type} style="top: ${item.top * 100}%" class="${item.font === '宋体' ? 'is-sun' : ''}">${item.value.text}</${type}>`;
              break;
            case 'item':
              itemTop = item.top;
              itemArr.push({
                text: `<td style="width: ${item.value.key.length + 1}em">${item.value.key}</td><td>：</td><td>${item.value.value}</td>`,
                class: item.font === '宋体' ? 'is-sun' : '',
              });
              break;
            default:
              console.log('something wrong');
          };
        });

        if (itemArr.length) {
          let tableStr = '';
          itemArr.forEach(item => {
            tableStr += `<tr class="${item.class}">${item.text}</tr>`
          });
          str += `<table style="top: ${itemTop * 100}%">${tableStr}</table>`;
        }
        return str;
      },
      editCover(event) {
        event.preventDefault();
        const url = `/college/attachment/edit_theme/id/${this.$route.params.id}`;
        const currentWidth = document.body.clientWidth;
        const currentHeight = document.body.clientHeight;
        const iWidth = currentWidth - 200; // 弹出窗口的宽度;
        const iLeft = (window.screen.availWidth - 20 - iWidth) / 2; // 获得窗口的水平位置;

        const win = window.open(url,
          '编辑封面', `resizable=yes, scrollbars=yes, width=${iWidth}, height=800, top=300, left=${iLeft}`);
        win.onload = function () {
          $(win.document).find('.question').hide();
        };
        window.closePage = function (refresh) {
          if (refresh) {
            location.href = location.href;
          }
          win.close();
        };
      },
      editCatalog(event) {
        event.preventDefault();
        const url = `/college/attachment/edit_catalog/id/${this.$route.params.id}`;
        const currentWidth = document.body.clientWidth;
        const currentHeight = document.body.clientHeight;
        const iWidth = currentWidth - 200; // 弹出窗口的宽度;
        const iLeft = (window.screen.availWidth - 20 - iWidth) / 2; // 获得窗口的水平位置;

        const win = window.open(url,
          '编辑目录', `resizable=yes, scrollbars=yes, width=${iWidth}, height=800, top=300, left=${iLeft}`);
        win.onload = function () {
          $(win.document).find('.question').hide();
        };
        window.closePage = function (refresh) {
          if (refresh) {
            location.href = location.href;
          }
          win.close();
        };
      },
      showFAQ(id) {
        const url = `/index/help/faq#${id}`;
        const currentWidth = document.body.clientWidth;
        const currentHeight = document.body.clientHeight;
        const iWidth = currentWidth - 200;
        const iLeft = (window.screen.availWidth - 20 - iWidth) / 2;

        const win = window.open(
          url,
          '常见问题|学术格子',
          `resizable=yes, scrollbars=yes, width=${iWidth}, height=800, top=300, left=${iLeft}`
        );

        window.closePage = function () {
          win.close();
        };
      },
      normalizeImage(item) {
        let url = item.url;
        let width = parseInt(item.width);
        let height = parseInt(item.height);
        let wild = false;
        if (width > height) {
          url = `${item.url}?x-oss-process=image/rotate,270`; // 如果宽大于高，则使用为url加旋转参数
          const temp = width; // 切换宽高属性
          width = height;
          height = temp;
        }
        if ((width / height) > this.containerRatio) {
          wild = true;
        }

        return {
          url,
          wild,
        }
      }
    },
    filters: {
      formatBoolean(value) {
        if (parseInt(value) === 1) {
          return true;
        }
        return false;
      }
    },
    components: {
      swiper,
      swiperSlide,
      stepAction,
    },
  };
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
